<style lang="less">
  .chest-pain-report{
    width: 100%;
    height: ~'calc(100% + 50px)';
    .box-header{
      height: 80px;
      padding-left: 40px;
      padding-top: 20px;
      &-span {
        margin-right: 10px;
      }
    }
    .box-chart{
      height: ~'calc(100% - 80px)';
      background: #f0f2f5;
      padding: 20px 40px 20px 40px;
      &-top{
        height: 400px;
        width: 100%;
        padding-top: 40px;
        background: #fff;
      }
      &-bottom{
        height: ~'calc(100% - 400px)';
        width: 100%;
        padding-top: 20px;
        background: #fff;
      }
      .chest-span {
        font-size: 22px;
        line-height: 22px;
        width: 100%;
        text-align: center;
        display: inline-block;
      }
    }
    .chest-chart{
      width: 100%;
      height: 100%;
    }
  }
</style>

<template>
  <div class="chest-pain-report">
    <div class="box-header">
      <span class="box-header-span">时间范围</span>
      <el-date-picker
        v-model="timeRange"
        type="monthrange"
        value-format="yyyy-MM"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="changTime"
      />
      <el-select v-model="timeValue" style="margin-left: 15px;" @change="changeType">
        <el-option v-for="(item, index) in timeList" :key="index" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div v-loading="loading" class="box-chart">
      <div class="box-chart-top">
        <span class="chest-span">{{ '胸痛已上报病例统计(合计' + reportedCases + '例)' }}</span>
        <div ref="chestChartBar" class="chest-chart" />
      </div>
      <div class="box-chart-bottom">
        <div ref="chestChartRing" class="chest-chart" />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getStatisticCpcDiagnosis } from '@/api/statistical/statistical-analysis'
export default {
  name: 'ChestPainReport',
  data() {
    return {
      loading: false,
      reportedCases: 0,
      timeValue: 'month',
      timeRange: [],
      startTime: '',
      endTime: '',
      timeList: [{
        label: '季度',
        value: 'quarter'
      }, {
        label: '月度',
        value: 'month'
      }, {
        label: '年度',
        value: 'year'
      }]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      this.reportedCases = 0
      if (this.timeRange && this.timeRange.length > 0) {
        this.startTime = this.timeRange[0]
        this.endTime = this.timeRange[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      getStatisticCpcDiagnosis({
        hospitalId: this.$store.getters.hospitalId,
        classify: this.timeValue,
        startTime: this.startTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          if (res.data) {
            this.getBarData(res.data.itemData)
            this.getRingData(res.data.totalData)
          }
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getBarData(dataInfo) {
      const chartLine = this.$refs.chestChartBar
      console.log(dataInfo, 'dataInfo')
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#F3F3F9'
              }
            },
            axisLabel: {
              color: '#666666'
            },
            data: dataInfo.timeData ? dataInfo.timeData.length > 0 ? dataInfo.timeData : [] : [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: {
          type: 'value',
          name: '（人数）',
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['#F3F3F9']
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: 'STEMI',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#4380EA'
            },
            data: dataInfo.countDiagnosisCode1 ? dataInfo.countDiagnosisCode1.length > 0 ? dataInfo.countDiagnosisCode1 : [] : []
          },
          {
            name: 'NSTEMI',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#5CCFFC'
            },
            data: dataInfo.countDiagnosisCode2 ? dataInfo.countDiagnosisCode2.length > 0 ? dataInfo.countDiagnosisCode2 : [] : []
          },
          {
            name: 'UA',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#CAEAFF'
            },
            data: dataInfo.countDiagnosisCode3 ? dataInfo.countDiagnosisCode3.length > 0 ? dataInfo.countDiagnosisCode3 : [] : []
          },
          {
            name: '主动脉夹层',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#00A0E9'
            },
            data: dataInfo.countDiagnosisCode4 ? dataInfo.countDiagnosisCode4.length > 0 ? dataInfo.countDiagnosisCode4 : [] : []
          },
          {
            name: '肺动脉栓塞',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#F78E12'
            },
            data: dataInfo.countDiagnosisCode5 ? dataInfo.countDiagnosisCode5.length > 0 ? dataInfo.countDiagnosisCode5 : [] : []
          },
          {
            name: '非ACS心源性胸痛',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#469FB4'
            },
            data: dataInfo.countDiagnosisCode6 ? dataInfo.countDiagnosisCode6.length > 0 ? dataInfo.countDiagnosisCode6 : [] : []
          },
          {
            name: '其他非心源性胸痛',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#00C0B7'
            },
            data: dataInfo.countDiagnosisCode7 ? dataInfo.countDiagnosisCode7.length > 0 ? dataInfo.countDiagnosisCode7 : [] : []
          },
          {
            name: '待查',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#A4ADBA'
            },
            data: dataInfo.countDiagnosisCode8 ? dataInfo.countDiagnosisCode8.length > 0 ? dataInfo.countDiagnosisCode8 : [] : []
          },
          {
            name: '其他',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#96A2FF'
            },
            data: dataInfo.countDiagnosisCode9 ? dataInfo.countDiagnosisCode9.length > 0 ? dataInfo.countDiagnosisCode9 : [] : []
          }
        ]
      }
      if (chartLine) {
        const myChart = echarts.init(chartLine)
        myChart.setOption(option)
      }
    },
    getRingData(dataInfo) {
      if (dataInfo && dataInfo.length > 0) {
        let summer = 0
        dataInfo.forEach(el => {
          summer += Number(el.value)
        })
        this.reportedCases = summer
      }
      const chartLine = this.$refs.chestChartRing
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '10%'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            left: '20%',
            radius: '75%',
            data: dataInfo ? dataInfo : [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      if (chartLine) {
        const myChart = echarts.init(chartLine)
        myChart.setOption(option)
      }
    },
    // 改变时间
    changTime() {
      this.init()
    },
    // 改变时间轴条件
    changeType() {
      this.init()
    }
  }
}
</script>
